<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>选座</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/csets.css" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
	var selectSets=new Array();
	var roundId=[[${roundid}]];
	var islogin=[[${islogin}]];
			$(function(){
				if(islogin==1){
					$(".cellphone").attr("style","");
					$(".iLoginComp-phone-num-wrapper").attr("style",'display: none');
					$(".iLoginComp-verify-code-wrapper").attr("style",'display: none');
					$(".iLoginComp-login-btn-wrapper").attr("style","");
				}else{
					
				}
				$.ajax({
					url:"/seting/"+roundId,
					type:"get",
					success:function(result){
						if(result.code==20000){
							$("#movieName").html(result.data.movie.mname);
							$("#movieType").html(result.data.movie.mtype);
							$("#movieLength").html(result.data.movie.mlength);
							$("#cinemaName").html(result.data.cinema.yname);
							$("#movieHallName").html(result.data.movieHall.ytname);
							$("#aroundStart").html(result.data.pstart);
							$("#aroundPrice").html("￥"+result.data.pprice+"/张");
							$("#movieLanguage").html(result.data.movie.language);
							$("#hidPrice").val(result.data.pprice);
							$("#hidRoundId").val(result.data.id)
							$(".img-responsive").attr("src",result.data.movie.movieImgs[0])
							alert(result.data.movie.movieImgs[0]);
							var content="";
							var layout=JSON.parse(result.data.ytlayout);
							var cont1="";
							var cont2="";
							$.each(layout,function(i,n){
								cont1+="<span class='row-id'>"+(i+1)+"</span>";
								cont2+="<div class='row'>";
								$.each(n,function(index,num){
									//-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
									if(num==0){
										cont2+="<span id='c_"+(i+1)+"_"+(index+1)+"' class='seat selectable' onclick=change("+(i+1)+","+(index+1)+") flag='1'></span>";
									}
									if(num==-1){
										cont2+="<span class='seat empty' ></span>";
									}
									if(num==2){
										cont2+="<span class='seat sold'></span>";
									}
								});
								cont2+="</div>";
							});
							$(".row-id-container").html(cont1);
							$(".seats-wrapper").html(cont2);
						}else{
							alert(result.message);
						}
					}
				});
				$("#fromSeat").submit(function(){
					if(selectSets.length==0){
						alert("未选择座位");
						return false;
					}else{
						var seats=JSON.stringify(selectSets);
						$("#hidSelectSets").val(seats);
					}
				});
			});
			function change(row,colum){
				var seat=new Array();
				var id="#c_"+row+"_"+colum
				var content="";
				seat[0]=row-1;
				seat[1]=colum-1;
				if($(id).attr("flag")==1){
					if(selectSets.length>=4){
						alert("一次最多选择四个座位");
						return;
					}
					$(id).attr("flag",0)
					selectSets.push(seat);
				}else{
					$(id).attr("flag",1);
					for(var i=0;i<selectSets.length;i++){
						if(selectSets[i][0]==(row-1)&&selectSets[i][1]==(colum-1)){
							selectSets.splice(i,1);
						}
					}
				}
				$(id).toggleClass("selectable").toggleClass("selected");
				for(var i=0;i<selectSets.length;i++){
					content+="<span class='ticket' row="+(selectSets[i][0]+1)+" column="+(selectSets[i][1]+1)+">"+(selectSets[i][0]+1)+"排"+(selectSets[i][1]+1)+"座</span>";
				}
				$("#ticker-container").html(content);
				var totalPrice=($("#hidPrice").val())*(selectSets.length);
				$(".price").html("￥"+totalPrice);
				if(selectSets.length!=0){
					$(".has-ticket").attr("style","");
					$(".no-ticket").attr("style","display: none");
				}else{
					$(".has-ticket").attr("style","display: none");
					$(".no-ticket").attr("style","");
				}
			}
		</script>
</head>
<body>
	<!-- header -->
	<div class="header">
		<div class="top_bg">
			<div class="container">
				<div class="header_top">
					<div class="logo">
						<a href="index.html" style="font-size: 20px;"><img
							src="/img/logo.png" alt="" />蜗牛影院</a>
					</div>
					<div class="top_right">
						<ul>
							<li><a href="registration.html">注册</a></li>|
							<li class="login">
								<div id="loginContainer">
									<a href="#" id="loginButton"><span>登陆</span></a>
									<div id="loginBox">
										<form id="loginForm">
											<fieldset id="body">
												<fieldset>
													<label for="email">账号</label> <input type="text"
														name="email" id="email">
												</fieldset>
												<fieldset>
													<label for="password">密码</label> <input type="password"
														name="password" id="password">
												</fieldset>
												<input type="submit" id="login" value="登陆"> <label
													for="checkbox"><input type="checkbox" id="checkbox">
													<i>记住我</i></label>
											</fieldset>
											<span><a href="#">密码忘记了?</a></span>
										</form>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="head-bann">
		<div class="container">
			<div class="head-nav">
				<span class="menu"> </span>
				<ul class="megamenu skyblue">
					<li><a class="color1" href="../index.html">首页</a></li>
					<li class="grid"><a class="color2" href="../movies.html">影片</a></li>
					<li><a class="color4" href="../cinema.html">影院</a></li>
					<li><a class="color4" href="../comment.html">评论</a></li>
					<div class="clearfix"></div>
				</ul>
			</div>
		</div>
	</div>
	<!-- script-for-nav -->
	<script>
			$("span.menu").click(function() {
				$(".head-nav ul").slideToggle(300, function() {
					// Animation complete.
				});
			});
		</script>
	<!-- script-for-nav -->
	<!-- header -->
	<div class="container">
		<div class="col-md-12 ">
			<div class="order-progress-bar">
				<div class="progress" style="height: 2px">
					<div class="progress-bar " role="progressbar" style="width: 30%;">
					</div>
				</div>
				<div class="step first done">
					<span class="step-num">1</span>
					<!-- <div class="bar"></div> -->
					<span class="step-text">选择座位</span>
				</div>
				<div class="step ">
					<span class="step-num">2</span>
					<!-- <div class="bar"></div> -->
					<span class="step-text">确认订单</span>
				</div>
				<div class="step last ">
					<span class="step-num">3</span>
					<!-- <div class="bar"></div> -->
					<span class="step-text">取票观影</span>
				</div>
			</div>
		</div>
		<div class="main clearfix col-md-12">
			<div class="hall col-md-8">
				<div class="seat-example">
					<div class="selectable-example example">
						<span>可选座位</span>
					</div>
					<div class="sold-example example">
						<span>已售座位</span>
					</div>
					<div class="selected-example example">
						<span>已选座位</span>
					</div>
				</div>
				<div class="seats-block" data-cols="20" data-section-id="21326"
					data-section-name="默认场区" data-seq-no="201909120011247">
					<div class="row-id-container"></div>

					<div class="seats-container">
						<div class="screen-container" style="left: 4%;">
							<div class="screen">银幕中央</div>
							<div class="c-screen-line"></div>
						</div>

						<div class="seats-wrapper"></div>
					</div>
				</div>
			</div>
			<div class="side col-md-4">
				<div class="movie-info clearfix">
					<div class="poster">
						<img class="img-responsive"
							src="">
					</div>
					<div class="content">
						<p class="name text-ellipsis" id="movieName"></p>
						<div class="info-item">
							<span>类型 :</span> <span class="value" id="movieType"></span>
						</div>
						<div class="info-item">
							<span>时长 :</span> <span class="value" id="movieLength"></span>
						</div>
					</div>
				</div>

				<div class="show-info">
					<div class="info-item">
						<span>影院 :</span> <span class="value text-ellipsis"
							id="cinemaName"></span>
					</div>
					<div class="info-item">
						<span>影厅 :</span> <span class="value text-ellipsis"
							id="movieHallName"></span>
					</div>
					<div class="info-item">
						<span>版本 :</span> <span class="value text-ellipsis" id="movieLanguage"></span>
					</div>
					<div class="info-item">
						<span>场次 :</span> <span class="value text-ellipsis screen"
							id="aroundStart"></span>
					</div>
					<div class="info-item">
						<span>票价 :</span> <span class="value text-ellipsis" id="aroundPrice"></span>
					</div>
				</div>

				<div class="ticket-info">
					<div class="no-ticket">
						<p class="buy-limit">座位：一次最多选4个座位</p>
						<p class="no-selected">
							请<span>点击左侧</span>座位图选择座位
						</p>
					</div>
					<div class="has-ticket" style="display: none">
						<span class="text">座位：</span>
						<div class="ticket-container"  id="ticker-container" data-limit="4">
							
						</div>
					</div>

					<div class="total-price">
						<span>总价 :</span> <span class="price">0</span>
					</div>
				</div>
				<div class="confirm-order">
					<div id="iLoginComp" style="visibility: visible;">
						<!-- <div id="secYodaRoot" class="mtfe-secyoda-mtfe-wrapper"></div>
						<div id="smdcodeYodaRoot" class="mtfe-smscodeyoda-mtfe-wrapper"></div>
						<div class="mtfe-tip-mtfe-wrapper" id="iLoginCompShowTip"></div>
						<div class="mtfe-model-mtfe-wrapper" id="iLoginCompModel"></div>
						<div class="mtfe-mask-mtfe-wrapper" id="iLoginCompMask"></div> -->
						<div class="iLoginComp-wrapper " id="iLoginCompInner">
							<div class="iLoginComp-phone-num-wrapper">
								<input class="iLoginComp-phone-num-input" id="phoneNumInput"
									type="text" maxlength="11" placeholder="输入手机号"> <span></span>
							</div>
							<div class="iLoginComp-verify-code-wrapper">
								<input class="iLoginComp-code-input" id="codeInput" type="text"
									placeholder="填写验证码">
								<div class="iLoginComp-send-verify-code-text" id="sendCodeBtn">获取验证码</div>
							</div>
							<div class="cellphone" style="display: none">
              					<span>手机号 :</span>
              					<span class="phone-num">[[${account}]]</span>
            				</div>
							<div class="iLogincomp-opbtn-wrapper">
								<form action="/order/creatOrder" method="post" id="fromSeat">
									<input type="hidden" id="hidRoundId" name="roundId">
									<input type="hidden" id="hidSelectSets" name="selectSets">
									<button class="iLoginComp-cancel-btn-wrapper" id="cancelLogin" style="display: none;">取消</button>
									<button class="iLoginComp-login-btn-wrapper "  type="submit"> 确认选座</button>
								</form>
							</div>
						</div>
					</div>

				</div>
			</div>

		</div>
		<div class="modal-container" style="display: none;">
			<div class="modal">
				<span class="icon"></span>

				<p class="tip">
					您选的是<span class="highlight">9月12日</span>的场次，请仔细核对哦
				</p>

				<div class="ok-btn btn">我知道了</div>
			</div>
		</div>
	</div>

	<!-- footer -->
	<div class="footer">
		<div class="container">
			<p>Copyright &copy; 2015.Company name All rights reserved.</p>
		</div>
	</div>
	<!-- footer -->
<input type="hidden" id="hidPrice">
</body>
</html>
